<template>
	<my-box title="告警信息">
		<div class="f1 h0 overflow-y-auto">
			<div v-for="item in list" :key="item.alarmName" class="giveAlarm p-y-10">
				<div class="flex m-between s-center">
					<div class="giveAlarm-name flex s-center">
						{{ item.subsystemName }}{{ item.propertyName }}
						<div class="warning" v-if="item.state">{{ item.state }}</div>
					</div>
					<span class="giveAlarm-date">{{ item.alarmTime }}</span>
				</div>
				<div class="giveAlarm-val m-t-10">
					{{ item.msg }}
				</div>
			</div>
		</div>
	</my-box>
</template>

<script setup>
defineProps({
	list: {
		type: Array,
		required: true
	}
})
</script>

<style lang="scss" scoped>
.giveAlarm {
	.warning {
		margin-left: 4px;
		background: rgba(253, 158, 57, 0.1);
		box-sizing: border-box;
		border: 1px solid #fd9e39;
		padding: 0 10px;
		font-size: 12px;
		color: #fd9e39;
		border-radius: 2px;
	}
	&-name {
		color: #ffffff;
		text-shadow: 0px 1px 1px rgba(4, 18, 42, 0.6);
		font-size: 16px;
	}
	&-date {
		font-size: 12px;
		color: #deedff;
		text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
	}
	&-val {
		color: rgba(255, 255, 255, 0.7);
		text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
		font-size: 14px;
	}
	& + .giveAlarm {
		border-top: 1px solid rgba(76, 107, 209, 0.5);
	}
}
</style>
